<template>
	<view class="content-navbar">
		<view class="placeholder-bg" v-if="placeholderBg" :style="{
			'height': (menuInfo.contentTop + 2) + 'px',
			'opacity': opacity,
			
		}">
			<img src="../../../../static/headbg.png" alt="" class="placeholder-image" />
		</view>
		<!-- 标题 -->
		<view class="nav-frame" :style="navFrameStyle" @click="back">
			<view class="title" :style="{
						'top': `${menuInfo.menuTop}px`,
						'line-height': `${menuInfo.menuHeight}px`,
						'color': `${titleColor}`,
						'background-color': `${bgColor}`
					}">
				<!-- 返回 -->
				<view class="icon" v-if="showBack">
					<uv-icon name="arrow-left" :color="iconColor" :size="iconSize || 18"></uv-icon>
				</view>
				<!-- 图标 -->
				<view class="icon" v-if="icon">
					<uv-icon :name="icon" :color="iconColor" :size="iconSize || 18"></uv-icon>
				</view>
				<div :style="{
					'margin-left': fnCenter(),
					'text-align': isTitleCente? 'center': 'left',
					'opacity': opacity
				}">
					{{title}}
				</div>
			</view>
		</view>

		<view class="placeholder" v-if="placeholder" :style="{
			'height': menuInfo.contentTop + 'px'
		}">

		</view>

	</view>
</template>

<script>
	import props from './props.js';
	const app = getApp()

	export default {
		data() {
			return {
				menuInfo: {}
			}
		},
		mixins: [props],
		created() {
			this.menuInfo = app.globalData.menuInfo
			
		},
		mounted() {
			
		},
		methods: {
			fnCenter() {
				if (this.isTitleCente) {
					return '0px'
				} else {
					return this.showBack || this.icon ? `${(this.iconSize || 18)+2}px` : '0px'
				}
			},
			back() {
				if (this.icon) {
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}
				if (this.showBack) {
					uni.navigateBack({
						fail: () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 默认边距宽度 */
	.nav-frame {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10000;
		background-color: red;
		

		// 标题
		.title {
			position: absolute;
			width: 100%;
			font-size: 16px;
			left: 0;
			font-weight: 600;

			// 返回
			.icon {
				position: absolute;
				top: 50%;
				left: 30rpx;
				transform: translate(0, -50%);
			}
		}
	}

	.pl {
		width: 100vw;
	}

	.placeholder-bg {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* 确保占位符背景覆盖整个视口 */
		background-size: cover;
		/* 或者使用 contain 根据需要 */
		background-position: center;
		background-repeat: no-repeat;
		z-index: 10000;

		.placeholder-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* 确保 img 标签内的图片不会被压缩且覆盖整个容器 */
		}
	}
</style>